<template>
  <div class="cards-item" @click="handleClick(data.value)">
    <span class="name">{{data.name}}</span>
    <i
      class="check-icon"
      :style="{backgroundImage:`url('${data.checked?IconChecked:IconCheck}')`}"
    ></i>
  </div>
</template>

<script>
import IconCheck from '@/assets/icons/check-normal.png'
import IconChecked from '@/assets/icons/check-active.png'

export default {
  name: 'cards-item',
  props: {
    data: {
      type: Object,
      required: true,
      default: () => ({ name: 'card name', value: 'card value', checked: false })
    },
    handleClick: { type: Function, required: false }
  },
  data: () => ({ IconCheck, IconChecked })
}
</script>

<style lang="stylus">
$icon-size = 30px;

.cards-item {
  display: flex;
  align-items: center;
  margin: 0 16px;
  padding: 16px 0;
  border-bottom: 1px solid $app-bgc;

  >.name {
    flex: 1;
  }

  >.check-icon {
    width: $icon-size;
    height: $icon-size;
    background: center / cover no-repeat;
  }
}
</style>
